<template>
  <basic-container>
    <h3>订单管理</h3>
    <div class="search">
      <el-select
        v-model="shopnamevalue"
        filterable
        clearable
        @change="storeaccess"
        placeholder="请选择店铺名称"
      >
        <el-option
          v-for="item in shopname"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="activeState"
        filterable
        clearable
        @change="keepersearch"
        placeholder="请选择状态"
      >
        <el-option
          v-for="item in shopkeeper"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="orderTips" v-if="socketState">{{ socketText }}</div>
      <!-- <button @click="handlePlay">点击</button>
			<button @click="send">发消息</button> -->
      <audio id="audio" src="./statics/13196.wav"></audio>
    </div>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      :page="page"
      @on-load="onLoad"
    >
      <template slot="shopNameForm" slot-scope="{ row, disabled }">
        <el-select
          v-model="row.shopName"
          filterable
          placeholder="请选择店铺名称"
          @change="tabkeepersearch(row)"
          :disabled="disabled"
        >
          <el-option
            v-for="item in shopname"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
      <template v-if="scope.row.isPay == 2" slot-scope="scope" slot="menu">
        <el-button
          type="primary"
          size="small"
          plain
          @click.stop="handleEdit(scope.row, scope.index)"
          >发货
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
// let baseUrl1 = "http://192.168.0.220:8084";
let baseUrl1 = "https://ycyf.zhilianyc.com"; //服务器地址
var dicDatas = {
  consumTypeId: [
    {
      label: "待付款",
      value: 1,
    },
    {
      label: "待发货",
      value: 2,
    },
    {
      label: "待收货",
      value: 3,
    },
    {
      label: "待评价",
      value: 4,
    },
    {
      label: "已关闭",
      value: 5,
    },
    {
      label: "已完成",
      value: 6,
    },
  ],
};
export default {
  data() {
    return {
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        pageSizes: [20, 30, 40, 50],
      },
      data: [],
      option: {
        addBtn: false,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: true,
        menuWidth: 250,
        align: "center",
        menuAlign: "center",
        dialogClickModal: false,
        column: [
          {
            label: "店铺名称",
            prop: "shopName",
          },
          {
            label: "商品名称",
            prop: "goodsName",
          },
          {
            label: "数量",
            prop: "count",
            editDetail: true,
            addDisabled: true,
          },
          {
            label: "原价",
            prop: "purchasePrice",
            editDetail: true,
            addDisabled: true,
          },
          {
            label: "现价",
            prop: "price",
          },
          {
            label: "支付金额",
            prop: "payPrice",
          },
          {
            label: "下单时间",
            prop: "placeOrderTime",
          },
          {
            label: "地址",
            prop: "address",
          },
          {
            label: "状态",
            prop: "isPay",
            dicData: dicDatas.consumTypeId,
          },
        ],
      },
      shopname: [],
      shopkeeper: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "待付款",
        },
        {
          value: "2",
          label: "待发货",
        },
        {
          value: "3",
          label: "待收货",
        },
      ],
      activeState: "0",
      shopnamevalue: "",
      socket: "",
      socketText: "",
      socketState: false,
      count_down: 0,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    let _this = this;
    _this.userInfo.userInfo.roles[0].shops.forEach((item) => {
      _this.shopname.push({
        value: item.shopId,
        label: item.name,
      });
    });
    _this.shopnamevalue = _this.shopname[0].value;
    _this.getDataList();
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    // 消息通知
    initWebSocket: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        // this.shopnamevalue
        let pathUrl =
          "ws://106.14.174.68:8084/app/webSocket/" +
          this.userInfo.userInfo.pcUserId;
        // let pathUrl = 'ws://192.168.0.220:8084/app/webSocket/' + this.userInfo.userInfo.pcUserId;
        this.socket = new WebSocket(pathUrl);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function (err) {
      console.log(err);
      console.log("连接错误");
    },
    getMessage: function (msg) {
      console.log(msg.data);
      if (msg.data != "连接成功") {
        this.socketText = msg.data;
        this.socketState = true;
        document.getElementById("audio").play();
        this.count_down = 10;
        this.time();
      }
    },
    time() {
      let that = this;
      if (that.count_down == 0) {
        that.socketState = false;
        clearTimeout(that.time);
      } else {
        that.count_down--;
        setTimeout(function () {
          that.time();
        }, 1000);
      }
    },
    send: function () {
      let params = '{"toUserId":"' + 20 + '","contentText":"叶鑫你好"}';
      this.socket.send(params);
    },
    close: function () {
      console.log("socket已经关闭");
    },
    handlePlay() {
      this.audioClick();
    },
    audioClick() {
      document.getElementById("audio").play();
    },
    // 进入页面加载
    getDataList() {
      let _this = this;
      let param = {
        shopId: _this.shopnamevalue,
        pageSize: _this.page.pageSize,
        pageNum: _this.page.pageNum,
        isPay: _this.activeState,
      };
      _this.$ajax
        .post(`${baseUrl1}/app/shop/order/getOrderByShopId`, param)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.page.total = resData.data.length;
            _this.data = resData.data;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    //状态下拉点击
    keepersearch() {
      let _this = this;
      console.log(_this.activeState);
      _this.getDataList();
    },
    // 分页
    onLoad(page) {
      this.page.pageNum = page.currentPage; //页数
      this.page.pageSize = page.pageSize; //条数
      this.getDataList();
    },
    // 店铺下拉点击
    storeaccess() {
      let _this = this;
      console.log(_this.shopnamevalue);
      _this.getDataList();
      _this.initWebSocket();
    },
    // 自定义发货按钮点击
    handleEdit(row, index) {
      let _this = this;
      if (row.isPay == "2") {
        console.log(row, index);
        _this
          .$confirm("确定发货吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let param = {
              shopId: row.shopId,
              orderId: row.orderId,
            };
            _this.$ajax
              .post(`${baseUrl1}/app/shop/order/sendOut`, param)
              .then(function (res) {
                //请求成功
                let resData = res.data;
                if (resData.code == 200) {
                  _this.$message({
                    type: "success",
                    message: "已成功发货",
                  });
                  _this.getDataList();
                } else {
                  _this.$message.error(resData.msg);
                }
              })
              .catch(function (error) {
                //请求失败
                console.log(error);
              });
          })
          .catch(() => {
            _this.$message({
              type: "info",
              message: "已取消发货",
            });
          });
      }
    },
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },
};
</script>

<style>
.search {
  margin: 10px 0;
}

.search .el-select {
  margin-right: 10px;
  margin-bottom: 10px;
}

.search .orderTips {
  position: fixed;
  bottom: 4%;
  right: 2%;
  width: 40%;
  height: 100px;
  line-height: 100px;
  padding: 0 10px;
  z-index: 5;
  font-size: 26px;
  text-align: center;
  background-color: #15a0ff;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
